<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			height: 2000px;
		}
		
		#wrap{
			width: 1220px;
			height: 260px;
			border: 1px solid #000;
			position: relative;
			margin: 100px auto;
			overflow: hidden;
		}

		#list{
			position: absolute;
			left: -80px;
			top: -17px;
			width: 200%;
			-webkit-animation: myfirst 10s infinite alternate linear;
		}

		#list li{
			width: 240px;
			height: 260px;
			border: 1px solid red;
			background: pink;
			color: #fff;
			text-align: center;
			float: left;
			list-style: none;
		}

		img{
			width: 240px;
			height: 260px;
			background-size: 100%;
		}

		@-webkit-keyframes myfirst{

			0%{left: -80px;}
			
			100%{left: -1240px;}

		}

	</style>
</head>
<body>
	<div id="wrap">
		<ul id="list">
			<li><img src="../img/1.jpg" alt=""></li>
			<li><img src="../img/2.jpg" alt=""></li>
			<li><img src="../img/3.jpg" alt=""></li>
			<li><img src="../img/4.jpg" alt=""></li>
			<li><img src="../img/5.jpg" alt=""></li>
			<li><img src="../img/6.jpg" alt=""></li>
			<li><img src="../img/7.jpg" alt=""></li>
			<li><img src="../img/8.jpg" alt=""></li>
			<li><img src="../img/9.jpg" alt=""></li>
			<li><img src="../img/10.jpg" alt=""></li>
		</ul>
	</div>
	
</body>
</html>